<template>
  <div class="yContainerColumnCenter yMatch" style="background: #666666">
    <el-card class="yContainerColumnCenter" style="background: white;padding: 20px;border-radius: 10px;width: 500px;margin-top: -100px">
      <span style="font-size: 25px;font-weight: bold">{{ title }}</span>
      <el-input size="large" prefix-icon="User" :placeholder="placeholder_username" v-model="input_username" @blur="click_refreshCode" clearable/>
      <el-input size="large" prefix-icon="Lock" :placeholder="placeholder_password" v-model="input_password" clearable show-password/>
      <el-input size="large" prefix-icon="Postcard" :placeholder="placeholder_code" v-model="input_code" clearable>
        <template #append>
          <el-image class="yContainerRowCenter" :src="url_code" fit="contain" style="width:90px;" @click="click_refreshCode">
            <template #placeholder>
              <el-icon class="yContainerRowCenter yMatch">
                <loading/>
              </el-icon>
            </template>
            <template #error>
              <el-icon class="yContainerRowCenter yMatch" @click="click_refreshCode">
                <warning/>
              </el-icon>
            </template>
          </el-image>
        </template>
      </el-input>
      <div class="yContainerRowCenter" style="margin-top: 20px">
        <el-button class="yWeight" type="default" size="large" @click="click_login_temp" :loading="isLoginLoad">游客登录</el-button>
        <el-button class="yWeight" type="primary" size="large" @click="click_login" :loading="isLoginLoad">普通登录</el-button>
      </div>
    </el-card>
    <span style="margin-top: 20px;color: white">默认用户名：YFree，默认密码：YFree</span>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
  computed: mapState(['store_title']),
  data() {
    return {
      title: '', url_code: '', isLoginLoad: false,
      input_username: 'YFree', input_password: 'YFree', input_code: '',
      placeholder_username: '请输入用户名', placeholder_password: '请输入密码', placeholder_code: '请输入验证码',
    }
  },
  beforeCreate() {
    $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
  },
  created() {
    $this.initTitle(yFree.webName);
    yFree.ySetTitle($this.store_title);
    $this.title = IFinal.toastTitle;
    AppUtils.deleteUserModel();
    yFree.yDelete(IFinal.SaveKey.menuModels_history);
    yFree.yShowBuilder(IFinal.builderTitle, (isConfirm) => {
      if (isConfirm) yFree.yToast(IFinal.toastTitle);
    }, false);
    $this.click_refreshCode();
  },
  methods: {
    ...mapMutations(["initTitle"]),
    click_refreshCode() {
      $this.url_code = yFree.yIsEmpty($this.input_username) ? '' : `${yFree.IP}/getCode?username=${$this.input_username}&v=${new Date().getTime()}`;
    },
    click_login_temp() {
      yFree.yToast(`登录成功，${IFinal.toastTitle}`);
      AppUtils.saveUserModel({
        "uid": "1",
        "nickname": "YFree",
        "login_time": `${new Date().getTime()}`,
        "sign_token": "sign_token",
        "sign_password": "sign_password",
        "menuModels": [
          {
            "title": "一级分类",
            "route": "",
            "subItems": [
              {
                "title": "二级分类",
                "route": "",
                "subItems": [
                  {
                    "title": "三级分类",
                    "route": "",
                    "subItems": [
                      {"title": "组件", "route": "page_view", "subItems": []},
                      {"title": "Tab标签", "route": "page_tab", "subItems": []}
                    ]
                  }
                ]
              }
            ]
          },
        ],
      });
      yFree.yIntent(IFinal.Page.home, null, 0);
    },
    click_login() {
      let username = $this.input_username;
      if (yFree.yIsEmpty(username)) {
        yFree.yToast($this.placeholder_username, "error");
        return;
      }
      let password = $this.input_password;
      if (yFree.yIsEmpty(password)) {
        yFree.yToast($this.placeholder_password, "error");
        return;
      }
      let code = $this.input_code;
      if (yFree.yIsEmpty(code)) {
        yFree.yToast($this.placeholder_code, "error");
        return;
      }
      $this.isLoginLoad = true;
      yFree.yPost($this, IJkid.login, {
        "username": username,
        "password": yFree.yAesEncrypt(password, IFinal.aesPwd),
        "code": code,
      }, (results) => {
        $this.isLoginLoad = false;
        yFree.yToast(`登录成功，${IFinal.toastTitle}`);
        AppUtils.saveUserModel(results[0]);
        yFree.yIntent(IFinal.Page.home, null, 0);
      }, (code, message) => {
        $this.isLoginLoad = false;
        $this.click_refreshCode();
      }, false);
    },
  },
};
</script>

<style scoped>
.el-input {
  margin-top: 20px;
}
</style>
